﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>果然FruitC</title>
		<meta name="description" content="果然FruitC" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="renderer" content="webkit">
        <meta http-equiv="Cache-Control" content="no-siteapp" />
		<link href="${ctx }/shop/css/style.css" rel="stylesheet" type="text/css" />
		<style>
		@font-face {
	font-family: FontAwesome;
	src: url(shop/fonts/fontawesome-webfont_0.eot);
	src: url(shop/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0)format('embedded-opentype'), url(shop/fonts/fontawesome-webfont.woff2?v=4.3.0)format('woff2'), url(fonts/fontawesome-webfont.woff?v=4.3.0)format('woff'), url(fonts/fontawesome-webfont.ttf?v=4.3.0)format('truetype'), url(fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular)format('svg');
	font-weight: 400;
	font-style: normal
}

[class*=am-icon-]:before {
	display: inline-block;
	font: normal normal normal 1.6rem/1 FontAwesome, sans-serif;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	transform: translate(0, 0)
}
			.nav_header img{
				width:100%;
			}
			.am-navbar-default a,
.am-navbar-one a {
}

.am-navbar {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 49px;
	line-height: 49px;
	z-index: 1010
}

.am-navbar ul {
	margin: 0;
	list-style: none;
}

.am-navbar .am-navbar-nav {
	padding-left: 8px;
	padding-right: 8px;
	text-align: center;
	overflow: hidden;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex
}

.am-navbar .am-navbar-nav li {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	float: none
}

.am-navbar-nav {
	position: relative;
	z-index: 1015
}

.am-navbar-nav a {
	display: inline-block;
	width: 100%;
	height: 49px;
	line-height: 20px
}

.am-navbar-nav a img {
	display: block;
	vertical-align: middle;
	height: 24px;
	width: 24px;
	margin: 4px auto 0
}

.am-navbar-nav a [class*=am-icon] {
	width: 24px;
	height: 24px;
	margin: 4px auto 0;
	display: block;
	line-height: 24px
}

.am-navbar-nav a [class*=am-icon]:before {
	font-size: 22px;
	vertical-align: middle
}

.am-navbar-nav a .am-navbar-label {
	padding-top: 2px;
	line-height: 1;
	font-size: 12px;
	display: block;
	word-wrap: normal;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden
}

.am-navbar-more [class*=am-icon-] {
	-webkit-transition: .15s;
	transition: .15s
}

.am-navbar-more.am-active [class*=am-icon-] {
	-webkit-transform: rotateX(-180deg);
	transform: rotateX(-180deg)
}

.am-navbar-actions {
	position: absolute;
	bottom: 49px;
	right: 0;
	left: 0;
	z-index: 1009;
	opacity: 0;
	-webkit-transition: .3s;
	transition: .3s;
	-webkit-transform: translate(0, 100%);
	-ms-transform: translate(0, 100%);
	transform: translate(0, 100%)
}

.am-navbar-actions.am-active {
	opacity: 1;
	-webkit-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	transform: translate(0, 0)
}

.am-navbar-actions li {
	line-height: 42px;
	position: relative
}

.am-navbar-actions li a {
	display: block;
	width: 100%;
	height: 40px;
	-webkit-box-shadow: inset 0 1px rgba(220, 220, 220, .25);
	box-shadow: inset 0 1px rgba(220, 220, 220, .25);
	padding-left: 20px;
	padding-right: 36px
}

.am-navbar-actions li a:after {
	font-family: FontAwesome, sans-serif;
	content: "\f105";
	display: inline-block;
	position: absolute;
	top: 0;
	right: 20px
}

.am-navbar-actions li a img {
	vertical-align: middle;
	height: 20px;
	width: 20px;
	display: inline
}

#am-navbar-qrcode {
	width: 220px;
	height: 220px;
	margin-left: -110px
}
.am-icon-home:before {
	content: "\f015"
}
.am-icon-shopping-cart:before {
	content: "\f07a"
}
.am-icon-user:before {
	content: "\f007"
}
body,pre{
    line-height: 1.6;
     font-family: "Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3",FontAwesome,sans-serif;
    font-weight: 400;
    color: #333;
    font-size: 1.6rem;
}
.line{
	margin:10px 0px;
	width: 100%;
	padding: 0px !important;
	}
.am-gallery {
   padding: 5px 5px 0;
   list-style: none;
   display:block;
   
}
/*清除浮动的样式*/
.am-gallery:after{ content:""; display:block; clear:both;}
.am-gallery li{
    display: block;
    height: auto;
    float: left;
    width:50%;
    padding:5px;
        box-sizing: border-box;
}
.am-gallery li a {
   text-decoration: none;
}
.am-gallery li img {
   width: 100%;
    height: auto;
    vertical-align: middle;
    border:0px;
}
.am-gallery-title{
	font-weight:100 !important;
	margin:0px;
	line-height:inherit !important;
	font-family: serif;
	font-size:1.2rem !important;
}
.am-gallery-desc{
	font-size:1.2rem;
}
a{
	text-decoration: none;
}

		</style>
		<link rel="stylesheet" type="text/css" href="${ctx }/shop/css/swiper.min.css"/>
	</head>
	<body>
<!--图片轮换-->
	<nav class="swiper-container nav_header">
	         <div class="swiper-wrapper nav_box">
	         <c:forEach items="${imgs }" var="record">
		        <div class="swiper-slide" onclick="toUrl('${record.url_}')">
			   	 		<img data-original="${record.img_}"  class="product_img lazy1"/>
			   	 </div>
	         </c:forEach>
	    </div>
	    <div class="swiper-pagination"></div>
	</nav>
  <div class="h-line"></div>
  <!-- 特色专区-->
  <div class="sq-title">
 	<img src="${ctx }/shop/images/ts.png" width="26"/>
 	特色专区
  </div>
  <ul data-am-widget="gallery" class="am-gallery pro-list am-avg-sm-2 am-avg-md-2 am-avg-lg-4 am-gallery-default"  >
      <c:forEach items="${gifts}" var="record">
      			<c:if test="${record.online_==1}">
   				<li>
			        <div class="am-gallery-item">
			            <a href="${ctx }/detail?id=${record.id}" class="">
			              <img data-original="${record.img_ }" style="width:100%" class="lazy"/>
			                <h3 class="am-gallery-title">${record.name_ }</h3>
			                <div class="am-gallery-desc">￥${record.price_ }</div>
			            </a>
			        </div>
      			</li>
      			</c:if>
      </c:forEach>
  </ul>
 <!--底部-->
 <div style="height: 55px;"></div>
 <div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default sq-foot am-no-layout" id="">
      <ul style="background: #d4d0d0;" class="am-navbar-nav am-cf am-avg-sm-5">   
          <li>
            <a  class="curr">
                <span class="am-icon-home"></span>
                <span class="am-navbar-label">首页</span>
            </a>
          </li>
          <li>
            <a href="${ctx }/shopcar" >
                <span class="am-icon-shopping-cart"></span>
                <span class="am-navbar-label">购物车</span>
            </a>
          </li>
 
          <li>
            <a href="${ctx }/person" >
                <span class="am-icon-user"></span>
                <span class="am-navbar-label">我的</span>
            </a>
          </li>
      </ul>
</div>
<script src="${ctx }/shop/js/jquery-1.10.2.min.js"></script>
<script src="http://g.grfruitc.top/swiper.min.js"></script>
<script src="http://g.grfruitc.top/jquery.lazyload.min.js"></script>
<script>
	function toUrl(url){
		if(url){
			location.href = url;
		}
	}

	function lazy(){
		var imgs = $('.lazy1');
		for(var i=0,len=imgs.length;i<len;i++){
			var img = imgs[i];
			var imgpath = $(img).attr("data-original");
			$("<img class='lazy_img' src='"+imgpath+"' onload =\"replaceImg(this,'"+imgpath+"',"+i+")\">").appendTo(document.body);
		}
	}
	function replaceImg(img,url,i){
		var img0 = $('.lazy1').get(i);
		img0.src = url;
		$(img).remove();
	}
	
	
	$(document).ready(function(){
		lazy();
		var swiper = new Swiper('.nav_header', {
			      pagination: '.swiper-pagination',
			      autoplay : 3000,
			      paginationClickable: false
			 	 });
		$('.lazy').lazyload({
		  failure_limit: 100,
		  placeholder : "http://g.grfruitc.top/def.jpg",
		  effect : "fadeIn"
		});
		$('.lazy1').lazyload({
		  failure_limit: 100,
		  placeholder : "http://g.grfruitc.top/def1.jpg",
		  effect : "fadeIn"
		});
	})
	
</script>
<%@include file="../common/jsticket.jsp"%><!--静态包含-->  
	</body>
</html>
